<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    Markdown 基本语法在 Ocean 中的展现形式 |
    
    ZhiYinQ</title>
  
    <link rel="shortcut icon" href="/favicon.icon">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>
</html>
<link href="https://cdn.staticfile.org/animate.css/3.7.2/animate.min.css" rel="stylesheet">

<body>
<main class="content">
  <section class="outer">
  <style>
.pag a:link, .pag a:visited {
    opacity: 1;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    -ms-transition: all .15s linear;
    transition: all .15s linear;
    color: #424242;
}
.pag a:hover {
    color: #ffffff;
}
.pag :hover {
    background-color: #127ea9;
}
</style>

<article id="post-md - 副本 (6)" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Markdown 基本语法在 Ocean 中的展现形式
    </h1>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/15/md - 副本 (6)/" class="article-date">
  <time datetime="2019-08-15T05:25:43.000Z" itemprop="datePublished">2019-08-15</time>
</a>
        
		&emsp;<i class="fe fe-bar-chart"></i> <span class="post-count">1.4k</span>字
		&emsp;<i class="fe fe-clock"></i> <span class="post-count">5</span>分钟
      </div>
    
    
      
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      
      
      
        <p>Markdown 基本语法在 Ocean 中的展现形式，此文完全是从 <a href="https://github.com/younghz/Markdown" title="younghz/Markdown" target="_blank" rel="noopener">younghz/Markdown</a> Clone 下来的，为了为自己查阅语法方便，也为想要使用 Ocean 的同学们提供示例，进而快速认知 Ocean 是否适合你的 Hexo ！</p>
<a id="more"></a>
<hr>
<h1 id="主要内容"><a href="#主要内容" class="headerlink" title="主要内容"></a>主要内容</h1><blockquote>
<p>Markdown是什么？</p>
<p>谁创造了它？</p>
<p>为什么要使用它？</p>
<p>怎么使用？</p>
<p>谁在用？</p>
<p>尝试一下</p>
</blockquote>
<h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p><strong>1. Markdown是什么？</strong><br><strong>Markdown</strong>是一种轻量级标记语言，它以纯文本形式<em>(易读、易写、易更改)</em>编写文档，并最终以HTML格式发布。<br><strong>Markdown</strong>也可以理解为将以MARKDOWN语法编写的语言转换成HTML内容的工具。</p>
<p><strong>2. 谁创造了它？</strong><br>它由<a href="http://www.aaronsw.com/" title="Aaron Swartz" target="_blank" rel="noopener">Aaron Swartz</a>和<strong>John Gruber</strong>共同设计，<strong>Aaron Swartz</strong>就是那位于去年（2013年1月11日）自杀,有着<strong>开挂</strong>一般人生经历的程序员。维基百科对他的<a href="http://zh.wikipedia.org/wiki/%E4%BA%9A%E4%BC%A6%C2%B7%E6%96%AF%E6%B2%83%E8%8C%A8" title="介绍" target="_blank" rel="noopener">介绍</a>是：<strong>软件工程师、作家、政治组织者、互联网活动家、维基百科人</strong>。</p>
<p>他有着足以让你跪拜的人生经历：</p>
<ul>
<li>14岁参与RSS 1.0规格标准的制订。</li>
<li>2004年入读斯坦福，之后退学。</li>
</ul>
<ul>
<li>2005年创建<a href="http://infogami.org/" target="_blank" rel="noopener">Infogami</a>，之后与<br><a href="http://www.reddit.com/" target="_blank" rel="noopener">Reddit</a>合并成为其合伙人。</li>
<li>2010年创立求进会（Demand Progress），积极参与禁止网络盗- 版法案（SOPA）活动，最终该提案被撤回。</li>
<li>2011年7月19日，因被控从MIT和JSTOR下载480万篇学术论文并- - 以免费形式上传于网络被捕。</li>
<li>2013年1月自杀身亡。</li>
</ul>
<p><img src="https://github.com/younghz/Markdown/raw/master/resource/Aaron_Swartz.jpg" alt></p>
<p>天才都有早逝的归途。</p>
<p><strong>3. 为什么要使用它？</strong></p>
<ul>
<li>它是易读（看起来舒服）、易写（语法简单）、易更改纯文本。处处体现着极简主义的影子。</li>
<li>兼容HTML，可以转换为HTML格式发布。</li>
<li>跨平台使用。</li>
<li>越来越多的网站支持Markdown。</li>
<li>更方便清晰地组织你的电子邮件。（Markdown-here, Airmail）</li>
<li>摆脱Word（我不是认真的）。</li>
</ul>
<p><strong>4. 怎么使用？</strong></p>
<p>如果不算<strong>扩展</strong>，Markdown的语法绝对<strong>简单</strong>到让你爱不释手。<br>Markdown语法主要分为如下几大部分：<br><strong>标题，段落，区块引用，代码区块，强调，列表，分割线，链接，图片，反斜杠 \，符号’`’</strong>。</p>
<h4 id="4-1-标题"><a href="#4-1-标题" class="headerlink" title="4.1 标题"></a><strong>4.1 标题</strong></h4><p>两种形式：<br>1）使用<code>=</code>和<code>-</code>标记一级和二级标题。</p>
<blockquote>
<p>一级标题<br><code>=========</code><br>二级标题<br><code>---------</code></p>
</blockquote>
<p>效果：</p>
<blockquote>
<h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1></blockquote>
<h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2><p>2）使用#，可表示1-6级标题。</p>
<blockquote>
<h1 id="一级标题-1"><a href="#一级标题-1" class="headerlink" title="一级标题"></a>一级标题</h1></blockquote>
<h2 id="二级标题-1"><a href="#二级标题-1" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3><h4 id="四级标题"><a href="#四级标题" class="headerlink" title="四级标题"></a>四级标题</h4><h5 id="五级标题"><a href="#五级标题" class="headerlink" title="五级标题"></a>五级标题</h5><h6 id="六级标题"><a href="#六级标题" class="headerlink" title="六级标题"></a>六级标题</h6><p>效果：</p>
<blockquote>
<h1 id="一级标题-2"><a href="#一级标题-2" class="headerlink" title="一级标题"></a>一级标题</h1></blockquote>
<h2 id="二级标题-2"><a href="#二级标题-2" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题-1"><a href="#三级标题-1" class="headerlink" title="三级标题"></a>三级标题</h3><h4 id="四级标题-1"><a href="#四级标题-1" class="headerlink" title="四级标题"></a>四级标题</h4><h5 id="五级标题-1"><a href="#五级标题-1" class="headerlink" title="五级标题"></a>五级标题</h5><h6 id="六级标题-1"><a href="#六级标题-1" class="headerlink" title="六级标题"></a>六级标题</h6><h4 id="4-2-段落"><a href="#4-2-段落" class="headerlink" title="4.2 段落"></a><strong>4.2 段落</strong></h4><p>段落的前后要有空行，所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用<strong>两个以上</strong>空格加上回车（引用中换行省略回车）。</p>
<h4 id="4-3-区块引用"><a href="#4-3-区块引用" class="headerlink" title="4.3 区块引用"></a><strong>4.3 区块引用</strong></h4><p>在段落的每行或者只在第一行使用符号&gt;,还可使用多个嵌套引用，如：</p>
<blockquote>
<blockquote>
<p>区块引用</p>
<blockquote>
<p>嵌套引用</p>
</blockquote>
</blockquote>
</blockquote>
<p>效果：</p>
<blockquote>
<p>区块引用</p>
</blockquote>
<blockquote>
<blockquote>
<p>嵌套引用</p>
</blockquote>
</blockquote>
<h4 id="4-4-代码区块"><a href="#4-4-代码区块" class="headerlink" title="4.4 代码区块"></a><strong>4.4 代码区块</strong></h4><p>代码区块的建立是在每行加上4个空格或者一个制表符（如同写代码一样）。如<br>普通段落：</p>
<p>void main()<br>{<br>printf(“Hello, Markdown.”);<br>}</p>
<p>代码区块：</p>
<pre><code>void main()
{
    printf(“Hello, Markdown.”);
}</code></pre><p><strong>注意</strong>:需要和普通段落之间存在空行。</p>
<h4 id="4-5-强调"><a href="#4-5-强调" class="headerlink" title="4.5 强调"></a><strong>4.5 强调</strong></h4><p>在强调内容两侧分别加上<code>*</code>或者<code>_</code>，如：</p>
<blockquote>
<p><em>斜体</em>，<em>斜体</em><br><strong>粗体</strong>，<strong>粗体</strong></p>
</blockquote>
<p>效果：</p>
<blockquote>
<ul>
<li>斜体 *，_ 斜体 _</li>
</ul>
</blockquote>
<blockquote>
<p>** 粗体 **，__ 粗体 __</p>
</blockquote>
<h4 id="4-6-列表"><a href="#4-6-列表" class="headerlink" title="4.6 列表"></a><strong>4.6 列表</strong></h4><p>使用<code>·</code>、<code>+</code>、或<code>-</code>标记无序列表，如：</p>
<blockquote>
<p>-（+<em>） 第一项<br>-（+</em>） 第二项</p>
<ul>
<li>（+*）第三项</li>
</ul>
</blockquote>
<p><strong>注意</strong>：标记后面最少有一个_空格_或制表符。若不在引用区块中，必须和前方段落之间存在空行。</p>
<p>效果：</p>
<blockquote>
<p>-（+<em>） 第一项<br>-（+</em>） 第二项<br>-（+*） 第三项</p>
</blockquote>
<h4 id="4-7-分割线"><a href="#4-7-分割线" class="headerlink" title="4.7 分割线"></a><strong>4.7 分割线</strong></h4><p>分割线最常使用就是三个或以上<code>*</code>，还可以使用<code>-</code>和<code>_</code>。</p>
<h4 id="4-8-链接"><a href="#4-8-链接" class="headerlink" title="4.8 链接"></a><strong>4.8 链接</strong></h4><p>链接可以由两种形式生成：<strong>行内式</strong>和<strong>参考式</strong>。<br>行内式：</p>
<blockquote>
<p>[younghz的Markdown库](https:://github.com/younghz/Markdown “Markdown”)。</p>
</blockquote>
<p>效果：</p>
<blockquote>
<p><a href="https://zhwangart.github.io/2018/11/29/Markdown/://github.com/younghz/Markdown" title="younghz的Markdown库。" target="_blank" rel="noopener">younghz的Markdown库</a></p>
</blockquote>
<h4 id="参考式："><a href="#参考式：" class="headerlink" title="参考式："></a><strong>参考式：</strong></h4><blockquote>
<p>[younghz的Markdown库1][1]<br>[younghz的Markdown库2][2]<br>[1]:https:://github.com/younghz/Markdown “Markdown”<br>[2]:https:://github.com/younghz/Markdown “Markdown”</p>
</blockquote>
<h4 id="效果："><a href="#效果：" class="headerlink" title="效果："></a><strong>效果：</strong></h4><blockquote>
<p>[younghz的Markdown库1][1]<br>[younghz的Markdown库2][2]<br>[1]:<a href="https://github.com/younghz/Markdown" target="_blank" rel="noopener">https://github.com/younghz/Markdown</a> “Markdown”<br>[2]:<a href="https://github.com/younghz/Markdown" target="_blank" rel="noopener">https://github.com/younghz/Markdown</a> “Markdown”</p>
</blockquote>
<p><strong>注意：</strong>上述的<code>[1]:https:://github.com/younghz/Markdown &quot;Markdown&quot;</code>不出现在区块中。</p>
<h4 id="4-9-图片"><a href="#4-9-图片" class="headerlink" title="4.9 图片"></a><strong>4.9 图片</strong></h4><p>添加图片的形式和链接相似，只需在链接的基础上前方加一个<code>！</code>。</p>
<h4 id="4-10-反斜杠"><a href="#4-10-反斜杠" class="headerlink" title="4.10 反斜杠\"></a><strong>4.10 反斜杠\</strong></h4><p>相当于<strong>反转义</strong>作用。使符号成为普通符号。</p>
<h4 id="4-11-符号’-’"><a href="#4-11-符号’-’" class="headerlink" title="4.11 符号’`’"></a><strong>4.11 符号’`’</strong></h4><p>起到标记作用。如：</p>
<pre><code>\`ctrl+a`\</code></pre><p>效果：</p>
<blockquote>
<p><code>ctrl+a</code></p>
</blockquote>
<h4 id="5-谁在用？"><a href="#5-谁在用？" class="headerlink" title="5. 谁在用？"></a><strong>5. 谁在用？</strong></h4><p>Markdown的使用者：</p>
<ul>
<li>GitHub</li>
<li>简书</li>
<li>Stack Overflow</li>
<li>Apollo</li>
<li>Moodle</li>
<li>Reddit</li>
<li>等等</li>
</ul>
<h4 id="6-尝试一下"><a href="#6-尝试一下" class="headerlink" title="6. 尝试一下"></a><strong>6. 尝试一下</strong></h4><ul>
<li><strong>Chrome</strong>下的插件诸如stackedit与markdown-here等非常方便，也不用担心平台受限。</li>
<li><strong>在线</strong>的dillinger.io评价也不错</li>
<li><strong>Windowns</strong>下的MarkdownPad也用过，不过免费版的体验不是很好。</li>
<li><strong>Mac</strong>下的Mou是国人贡献的，口碑很好。</li>
<li><strong>Linux</strong>下的ReText不错。</li>
</ul>
<p><strong>当然，最终境界永远都是笔下是语法，心中格式化 :)。</strong></p>
<p>–<br><strong>注意</strong>：不同的Markdown解释器或工具对相应语法（扩展语法）的解释效果不尽相同，具体可参见工具的使用说明。<br>虽然有人想出面搞一个所谓的标准化的Markdown，[没想到还惹怒了健在的创始人John Gruber]<br>(<a href="http://blog.codinghorror.com/standard-markdown-is-now-common-markdown/" target="_blank" rel="noopener">http://blog.codinghorror.com/standard-markdown-is-now-common-markdown/</a> )。</p>
<p>–</p>
<p>以上基本是所有traditonal markdown的语法。</p>
<p><strong>其它：</strong></p>
<p>列表的使用(非traditonal markdown)：</p>
<p>用<code>|</code>表示表格纵向边界，表头和表内容用<code>-</code>隔开，并可用<code>:</code>进行对齐设置，两边都有:则表示居中，若不加:则默认左对齐。</p>
<table>
<thead>
<tr>
<th align="center">代码库</th>
<th>链接</th>
</tr>
</thead>
<tbody><tr>
<td align="center">MarkDown</td>
<td><a href="https://github.com/younghz/Markdown" title="https://github.com/younghz/Markdown" target="_blank" rel="noopener">https://github.com/younghz/Markdown</a></td>
</tr>
<tr>
<td align="center">MarkDownCopy</td>
<td><a href="https://github.com/younghz/Markdown" title="https://github.com/younghz/Markdown" target="_blank" rel="noopener">https://github.com/younghz/Markdown</a></td>
</tr>
</tbody></table>
<p>关于其它扩展语法可参见具体工具的使用说明。</p>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="https://github3982.github.io/2019/08/15/md - 副本 (6)/" data-id="ck1vxnbqb0014iwq03sxvfwcc"
         class="article-share-link">分享</a>“”“分享按钮”“”-->
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/md/">md</a></li></ul>

	  
	<div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束&nbsp;<i class="fe fe-smile"></i>&nbsp;感谢您的阅读 -------------</div>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2019/08/15/md - 副本 (5)/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            Markdown 基本语法在 Ocean 中的展现形式
          
        </div>
      </a>
    
    
      <a href="/2019/08/15/md - 副本 (7)/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">Markdown 基本语法在 Ocean 中的展现形式</div>
      </a>
    
  </nav>


  

  
    

  

</article>



</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <!--<li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>-->
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 ZhiYinQ</li>
      <li>Powered by <a style="text-decoration: none !important;">Hexo</a></li>
      <li>Theme  <a style="text-decoration: none !important;">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>

<aside class="sidebar sidebar-specter">
  
    <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img id="img" src="/images/hexo.svg" alt="ZhiYinQ"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/dynamic">动态</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/share">分享</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/playlist">播放</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
  </aside>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.justifiedGallery.min.js"></script>
<script src="/js/lazyload.min.js"></script>
<script src="/js/busuanzi-2.3.pure.min.js"></script>

  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/tocbot.min.js"></script>
  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>



<script>
// 使用fancybox来显示post图片集(#andus-head-img为头像id)
$('img:not(#img)').each(function() {
  $(this).wrap('<a class="fancybox" data-fancybox="gallery" href="' + $(this).prop("src") + '"></a>'); 
})
</script>


<script src="/js/ocean.js"></script>

</body>
</html>
<script type="text/javascript" src="../dist/music.js"></script>
<script src="js/scrollReveal.js"></script>
</script>

	  <script>
			  $(function(){
    $('div img li').addClass('wdata-scroll-reveal');
});
</script>
<script>
window.scrollReveal = new scrollReveal();
//或者，elem 为动画元素的任何级别的父元素
window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});
</script>	
